<p class="lead" style="max-width: 864px">
  The Dynamic Tabs demo shows how internal tab views can be easily used.
</p>
<md-tab-group (selectChange)="onTabChange()" [(selectedIndex)]="selectedIndex">
  <md-tab label="Tab 1">Content 1</md-tab>
  <md-tab label="Tab 2">
    <ng-template md-tab-label>
        <strong class="tab-title">hello</strong>
        <i class="fa fa-close meiyu-tab-icon pull-right"></i>
      <!-- <i fa fa-close fa-close-2x></i> -->
    </ng-template>
    <ng-template md-tab-body>
      helloa as daf
    </ng-template>
    </md-tab>
  <md-tab label="{{tab.label}}" *ngFor="let tab of tabs"></md-tab>
</md-tab-group>
<!-- <md-toolbar>
  <div class="md-toolbar-tools">
    <md-button class="md-icon-button" aria-label="Settings">
      <md-icon md-font-icon="zmdi zmdi-menu"></md-icon>
    </md-button>
    <h2>
      <span>Dynamic Tabs</span>
    </h2>
    <span flex></span>
    <md-menu md-position-mode="target-right target">
      <md-button aria-label="More" class="md-icon-button" ng-click="$mdOpenMenu()">
        <md-icon md-menu-origin md-font-icon="zmdi zmdi-more-vert"></md-icon>
      </md-button>
      <md-menu-content width="4">
        <md-menu-item ng-repeat="item in [1, 2, 3]">
          <md-button>
            Option {{item}}
          </md-button>
        </md-menu-item>
      </md-menu-content>
    </md-menu>
  </div>
</md-toolbar> -->
<div class="example-container">
  <!-- <h3>Normal Buttons</h3>
  <div class="button-row">
    <button md-button>Flat button</button>
    <button md-raised-button>Raised button</button>
    <button md-fab><md-icon>check</md-icon></button>
    <button md-mini-fab><md-icon>check</md-icon></button>
  </div>

  <h3>Link Buttons</h3>
  <div class="example-button-row">
    <a md-button routerLink=".">Flat button</a>
    <a md-raised-button routerLink=".">Raised button</a>
    <a md-fab routerLink="."><md-icon>check</md-icon></a>
    <a md-mini-fab routerLink="."><md-icon>check</md-icon></a>
  </div>
  <md-toolbar color="primary">

    <span>Custom Toolbar</span>

  <md-toolbar-row>
    <span>Second Line</span>
    <span class="example-spacer"></span>
    <md-icon class="example-icon">verified_user</md-icon>
  </md-toolbar-row>

  <md-toolbar-row>
    <span>Third Line</span>
    <span class="example-spacer"></span>
    <md-icon class="example-icon">favorite</md-icon>
    <md-icon class="example-icon">delete</md-icon>
  </md-toolbar-row>
  </md-toolbar> -->
<!-- <md-tab-group>
  <md-tab label="Tab 1">Content 1</md-tab>
  <md-tab label="Tab 2">Content 2</md-tab>
</md-tab-group> -->
</div>
